import React, {useState, useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import {ResponseType, ScreensParamList} from 'types';
import {StackNavigationProp} from '@react-navigation/stack';
import {RouteProp} from '@react-navigation/native';
import {useDispatch, useSelector} from 'react-redux';
import actions from 'reduxState/actions';
import {selectEventDetail} from 'reduxState/selectors';
import Icon from 'react-native-vector-icons/Ionicons';
import DetailWhat from './DetailWhat';
import Line from 'components/Line';
import DetailWhen from './DetailWhen';
import DetailWhere from './DetailWhere';
import DetailBar from './DetailBar';
import VirScroll from 'components/VirScroll';
import {get} from 'utils/request';
import DetailComment from './DetailComment';
import {creatGetComments} from '../Comments';

type WebScreenNavigationProp = StackNavigationProp<
  ScreensParamList,
  'DetailsScreen'
>;
type WebScreenRouteProp = RouteProp<ScreensParamList, 'DetailsScreen'>;

export interface Props {
  navigation: WebScreenNavigationProp;
  route: WebScreenRouteProp;
}
function Details({navigation}: Props) {
  const dispatch = useDispatch();
  const detailInfo = useSelector(selectEventDetail);
  useEffect(() => {
    const unsubscribe = navigation.addListener('tabPress', (e) => {
      // 设置detailsTab激活
      dispatch(actions.setActiveTab('Details'));
    });
    if (detailInfo) {
      getLikesData(detailInfo.id);
    }
    return unsubscribe;
  }, []);
  const [likeList, setLikeList] = useState([]);
  const getData = creatGetComments(detailInfo?.id);
  async function getLikesData(detailId: number) {
    const {data}: ResponseType = await get(`/events/${detailId}/likes`);
    setLikeList(data.users);
  }
  return (
    <>
      <View style={styles.container}>
        <VirScroll
          freshForce={detailInfo}
          LisHeaderComponent={
            <View>
              <DetailWhat
                description={detailInfo?.description}
                images={detailInfo?.images}
                style={styles.mt16}
              />
              <Line style={styles.line} size={2} />
              <DetailWhen
                beginTime={detailInfo?.begin_time}
                endTime={detailInfo?.end_time}
                style={styles.mt16}
              />
              <Line style={styles.line} size={2} />
              <DetailWhere
                location={detailInfo?.location}
                locationDetail={detailInfo?.location_detail}
                style={styles.mt16}
              />
              <Line style={styles.line} size={2} />
              <DetailBar
                style={styles.mt16}
                PrefixIcon={() => (
                  <Icon name="checkmark-outline" size={24} color="#AC8EC9" />
                )}
                prefixText={`${detailInfo?.goings_count} going`}
                iconList={likeList}
                showAll={true}
              />
              <DetailBar
                style={styles.mt16}
                PrefixIcon={() => (
                  <Icon name="heart-outline" size={24} color="#AC8EC9" />
                )}
                prefixText={`${detailInfo?.likes_count} likes`}
                iconList={likeList}
              />
              <Line style={styles.line} size={2} />
            </View>
          }
          getDataFn={getData}
          keyExtractor={(item) => String(item.id)}
          renderItem={DetailComment}
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 20,
    backgroundColor: '#FAF9FC',
  },
  mt16: {
    marginTop: 20,
  },
  line: {
    marginTop: 24,
    marginBottom: 16,
  },
});
export default Details;
